<template>
<!-- 登录框 -->
<div class="main">
    <div class="wb">
        <span class="tb">登录</span>
        <div class="nb">
            <input v-model="username" class="zh" placeholder="账号" type="text" name="username" autofocus>
            <br><br>
            <input v-model="password" class="mm" placeholder="密码" type="password" name="password" autocomplete="off">

            <div style="padding-top:6px">
                <input v-model="code" class="yz" placeholder="验证码" type="text" name="yanzhenma" autocomplete="off">
                <el-image :src="src" style="float:right  " @click="capture()"></el-image>
            </div>
            <br><br>
            <div>
                <el-button class="dl" type="primary" @click="login">登录</el-button>
            </div>
        </div>
        <p class="px">
        </p>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            password: '',
            code: '',
            token: '',
            src: ''
        };

    },
    methods: {
        capture() {
            this.axios.get("/api/captcha").then(res => {
                this.src = res.data.data.base64Img;
                this.code = res.data.data.code;
                this.token = res.data.data.token;
            })
        },
        // 登陆
        login() {
            if (!this.code && this.code.length == 0) {
                this.$message.error("请输入验证码");
                return;
            }

            let param = new URLSearchParams();
            param.append("username", this.username);
            param.append("password", this.password);
            param.append("token", this.token);
            param.append("code", this.code);
            console.log(param)
            this.axios.post("/api/login", param).then((res) => {
                if (res.data.flag) {
                    this.$message({
                        message: res.data.message,
                        type: "success",
                    });
                    this.$router.push("/");
                } else {
                    this.$message.error(res.data.message);
                    this.capture();
                }
            });
        }
    },
    created() {
        this.capture();
    },
    components: {}
}
</script>

<style scoped>
.main {
    margin: 0 auto;
    padding-top: 250px;
    height: 76vh;
    background: url("https://lishungulimall.oss-cn-shenzhen.aliyuncs.com/config/a2a7d09169174dc61ea6bfdd33742fad.jpg");
    background-size: 100%;

}

.tb {
    font-size: 30px;
    margin-left: 195px;
}

.wb {
    margin: 0 auto;
    width: 450px;
    height: 367px;
}

.nb {
    position: relative;
    margin: 0 auto;
    width: 306px;
}

.zh,
.yz,
.mm {
    padding-left: 10px;
    background-color: rgb(232, 240, 254);
    width: 300px;
    height: 40px;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, .1);
}

.mm {
    margin-top: -5px;
}

.zh {
    margin-top: 50px;
}

.yz {
    float: left;
    width: 100px;
}

/* .zh:focus{
            获取焦点后 
        } */
.dl {
    width: 100%;
    /* border-radius: 5px;
    position: absolute;
    padding: 0px;
    margin: auto;
    background-color: #00A7de;
    border: 10px;
    width: 100%;
    height: 38px; */
}

.dl:hover {
    background-color: #10b8f0;
}

.an {

    color: #fff;
    text-decoration: none;
}

.px {
    text-align: center;
    line-height: 16px;
    margin-top: 150px;
    font-size: 10px;

}

.px a {
    text-decoration: none;
    color: #00A7de;
}
</style>
